<script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { RoutingStepModel } from '#/api/process/models';

import { Page } from '@vben/common-ui';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getStepStandardListApi } from '#/api/process/stepStandard';

import RoutingStep2 from '../routing-step/index.vue';
import { useColumns } from './data';

const [Grid, gridApi] = useVbenVxeGrid({
  gridOptions: {
    columns: useColumns(),
    data: [],
    border: true,
    stripe: true,
    pagerConfig: {
      enabled: false,
    },
  } as VxeTableGridOptions,
});

/**
 * 点检选中项
 */
function itemSelected(item?: RoutingStepModel) {
  if (item) {
    getStepStandardListApi(item.id).then((data) => {
      gridApi.grid.loadData(data);
    });
  } else {
    gridApi.grid.loadData([]);
  }
}
</script>

<template>
  <Page auto-content-height>
    <div class="flex h-full w-full">
      <div class="h-full w-4/12">
        <RoutingStep2 @item-selected="itemSelected" />
      </div>
      <div class="ml-2 h-full w-8/12">
        <Grid />
      </div>
    </div>
  </Page>
</template>
